<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:c="http://java.sun.com/jsp/jstl/core">

<ui:composition template="../templates/commonClient.xhtml">
	<ui:define name="pageTitle">Title</ui:define>
	<ui:define name="pageHeader">Header</ui:define>

	<ui:define name="container">
		<h:body>
			<h:form id="form">
				<div class="row section">
				<div class="row">
					<div class="col-lg-12">
						<h1 class="page-header">
							Détails sur le pack
						</h1>
						<ol class="breadcrumb">
							<li><a href="accueil.jsf">Accueil</a></li>
							<li class="active"><a href="#">Recherche voyages</a></li>
<!-- 							<li class="active"><a href="#">#{frontBean.destination}</a></li> -->
						</ol>
					</div>
					</div>
					<div class="row">

						<div class="col-lg-9">
							<c:forEach items="#{frontBean.listVoyageDetail}" var="voyage">
							<h1><h:outputLabel value="#{voyage.destination}" /></h1>
								<hr>
										<div id="carousel-example-generic" class="thumbnail carousel slide" data-ride="carousel">
											<!-- Indicators -->
											<ol class="carousel-indicators">
											  <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
											  <li data-target="#carousel-example-generic" data-slide-to="1"></li>
											  <li data-target="#carousel-example-generic" data-slide-to="2"></li>
											</ol>
										
											<!-- Wrapper for slides -->
											<div class="carousel-inner">
											  <div class="item active">
											  <div class="fill" style="padding-left: 120px; background-color:grey">
											    <img src="/voyages-web/resources/img/#{voyage.destination.toLowerCase()}/1.jpg" alt="#{voyage.destination}"/></div>
											    <div class="carousel-caption">
											     First
											    </div>
											  </div>
											  <div class="item">
											  <div class="fill" style="padding-left: 120px; background-color: grey">
											    <img src="/voyages-web/resources/img/#{voyage.destination.toLowerCase()}/2.jpg" alt="#{voyage.destination}"/></div>
											    <div class="carousel-caption">
											     Second
											    </div>
											  </div>
											  <div class="item">
											  <div class="fill" style="padding-left: 120px; background-color: grey">
											    <img src="/voyages-web/resources/img/#{voyage.destination.toLowerCase()}/3.jpg" alt="#{voyage.destination}"/></div>
											    <div class="carousel-caption">
											     third
											    </div>
											  </div>
											</div>
										
											<!-- Controls -->
											  <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
											    <span class="glyphicon glyphicon-chevron-left"></span>
											  </a>
											  <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
											    <span class="glyphicon glyphicon-chevron-right"></span>
											  </a>
										</div>
								</hr>
								Référence : <h:outputLabel value="#{voyage.reference}" /><br></br>
								Lieu de départ : <h:outputLabel value="#{voyage.depart}" /><br></br>
								Date de départ : <h:outputLabel value="#{voyage.dateDepart}" /><br></br>
								Date de retour : <h:outputLabel value="#{voyage.dateRetour}" /><br></br>
								Nombre de Places : <h:outputLabel value="#{voyage.nbrePlace}" /><br></br>
								Prix : <h:outputLabel value="#{voyage.prix}" />
								<hr>
									<h3><span>Description :</span></h3>
									<div style="text-align: justify;"><p>#{voyage.description}</p></div>
									<h:commandLink class="btn btn-info" action="#{frontBean.reserverVoyage()}" value="Réserver">
			   							<f:param name="VoyageId" value="#{voyage.idVoyage}" />
									</h:commandLink>
								</hr>
							</c:forEach>
						</div>

						<div class="col-lg-3">
							<div class="panel panel-primary">
								<div class="panel-heading"><strong>Rechercher un Voyage</strong></div>
								<div class="panel-body">
								<div class="input-group">
									<div class="form-group input-group">
										<span class="input-group-addon text-center">Destination :</span>
										<h:inputText type="text" class="form-control"
											placeholder="Destination" value="#{frontBean.destination}" />
									</div>
								</div>
								<div class="col-md-6 col-md-offset-3">
									<h:commandButton class="btn btn-success btn-block" value="Rechercher" action="#{frontBean.rechercherVoyages}" />
								</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</h:form>

		</h:body>
	</ui:define>

	<ui:define name="body">
		<form jsfc="h:form" id="Form"></form>
	</ui:define>
</ui:composition>

</html>